<template>
  <el-table  :data="props.values"  style="width: 100%" max-height="250">

    <el-table-column  prop="name" label="重叠棒组名称"  >
      <template #default="scope">
        <el-input
            :model-value="values[scope.$index].name"
            :disabled="disabled"
            @input="(value)=>{onChange(scope.$index,'name',value)}"
        ></el-input>
      </template>
    </el-table-column>
    <el-table-column prop="height" label="相邻控制棒高度差"  >
      <template #default="scope">
        <el-input
            :model-value="values[scope.$index].height"
            :disabled="disabled"
            @input="(value)=>{onChange(scope.$index,'height',value)}"
        ></el-input>
      </template>
    </el-table-column>
    <el-table-column fixed="right" label="操作" >
      <template #default="scope">
        <el-button
            :disabled="disabled"
            link
            type="primary"
            size="small"
            @click.prevent="deleteRow(scope.$index)"
        >
          删除
        </el-button>
      </template>
    </el-table-column>

  </el-table>
  <el-button :disabled="disabled" class="mt-4" style="width: 100%" @click="onAddItem()"
  >+</el-button
  >
</template>

<script  setup>
import {defineEmits, defineProps } from "vue";

// eslint-disable-next-line no-unused-vars
let emit = defineEmits(['values',"disabled","onAddItem","deleteRow","onChange"])
// eslint-disable-next-line no-unused-vars
let props = defineProps({
  values: Array,
  disabled:Boolean,
  onAddItem:Function,
  deleteRow:Function,
  onChange:Function
})
</script>
